import React from 'react';
import { observer } from 'mobx-react';
// import { WeaZmage } from "ecCom";
import jQuery from 'jquery';
import window from '../util';
import { Button } from 'antd';
import load from 'loadjs';
import {WeaTools} from 'ecCom';
const getParent = WeaTools.WindowFunc.getParent;
const getTop = WeaTools.WindowFunc.getTop;

export interface FileDownloadProps {
    fieldids: string;
    width: string | number;
    height: string | number;
    isbatch: string;
    isdownload: string;
    docs: string;
}

@observer
export default class FileDownload extends React.Component<FileDownloadProps, any> {
    constructor(props) {
        super(props);
        this.state = {
            containerId: `${new Date().getTime()}_${Math.ceil(Math.random() * 100000)}`,
          hasSetWindow: false,
        };
      }
    componentDidMount() {
        this.addHover();
        !load.isDefined('imcarouselJS') && load(
            [
                '/social/js/drageasy/drageasy.js',
                '/social/js/bootstrap/js/bootstrap.js',
                '/social/im/js/IMUtil_wev8.js',
                '/social/js/imcarousel/imcarousel.js',
            ],
            'imcarouselJS'
        );
    }
    componentDidUpdate() {
        this.addHover();
        // if(this.props.isdownload == "0"){
        //     jQuery('.carousel-fullpane .download').remove();
        // }
    }
    addHover = () => {
        jQuery('.cube-dialog-img-download-list').hover(function () {
            jQuery(this).find('.cube-dialog-img-download-mask').css({ display: "block" })
        }, function () {
            jQuery(this).find('.cube-dialog-img-download-mask').css({ display: "none" })
        })
    }
    getImgsItem = () => {
        const { fieldids, width, height, isdownload } = this.props;
        const fieldidArr = fieldids.split(",");
        const ImgArr: any = [];
        fieldidArr.map(field => {
            const loadlink = "/weaver/weaver.file.FileDownload?fileid=" + field + "&requestid=";
            ImgArr.push(
                <div className="cube-dialog-img-download-list" style={{ zIndex: 1055 }}>
                    <img
                        src={loadlink}
                        style={{ width: width, height: height, cursor: 'pointer' }}
                        className='cubeFormImgPlay'
                        onClick={this.playImg}
                        data-imgsrc={loadlink}

                    />
                    {isdownload == "1" && <div className="cube-dialog-img-download-mask" style={{ width: width, lineHeight: Number(height) * 0.3 + "px", height: Number(height) * 0.3, }}>
                        <span className="icon-coms-download2" style={{ cursor: 'pointer' }} onClick={this.downloadFile.bind(this, field)}></span>
                    </div>}
                </div>
            )
        });
        return ImgArr;
    }
    playImg = (e) => {     // 图片轮播
        const jq = this.getCurrentJQuery();
        const currentWindow = this.getCurrentWindow();
        const imgPool:any = [];
        let indexNum = 0;
        jq('.cubeFormImgPlay').each(function () {
            imgPool.push(jq(this).attr('data-imgsrc'));
        });
        for (let i = 0; i < imgPool.length; i++) {
            if (jq(e.target).attr('data-imgsrc') === imgPool[i]) {
                break;
            } else {
                indexNum++;
            }
        }
        window.IMCarousel.showImgScanner4Pool(true, imgPool, indexNum, null, currentWindow.top);
    }
    getCurrentJQuery = () => {
        const currentWindow = this.getCurrentWindow();
        return currentWindow.$ || currentWindow.jQuery;
    }
    // 获取 window
    getCurrentWindow = () => {
        if (this.state.hasSetWindow) {
            return window['setUploadWindow' + this.state.containerId];
        }
        return (
            getParent() !== window && jQuery(this.refs.wrap).closest('.ant-modal').length > 0 ?
                getTop().window :
                window
        );
    }
    downloadFile = (field) => {
        window.open("/weaver/weaver.file.FileDownload?fileid=" + field + "&download=1&requestid=", '_self');
        return false;
    }
    batchDownload = () => {
        const { fieldids, docs } = this.props;
        window.open('/weaver/weaver.file.FileDownload?delImgIds=' + fieldids + '&download=1&downloadBatch=1&requestid=&fieldvalue=' + docs, "_self");
        return false;
    }
    render() {
        const { isbatch } = this.props;
        return (
            <div className="cube-dialog-img-download" >
                {this.getImgsItem()}
                {isbatch == "1" &&
                    <div className="cube-dialog-img-batch-btn">
                        <Button type="primary" onClick={this.batchDownload}>批量下载</Button>
                    </div>
                }
            </div>
        )
    }
}